<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        .bg{
            background-color: red;
        }
        .c1{
            font-size: 25px;
        }
        .f1{
            color:aqua;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let classNames = 'bg c1 f1'
    let classArr = ['bg', 'c1', 'f1']; // 数组渲染到内容遍历输出，渲染到属性遍历数据用, 隔开
    root.render((
        <div>
            <div className="bg c1">bg c1</div>
            <div className={classNames}>bg c1 f1</div>
            <div className={classArr}>bg c1 f1  {classArr}</div>
            <div className={classArr.join(' ')}>bg c1 f1</div>
        </div>
    ))
</script>
</html>